import 'package:effective/service/api.dart';
import 'package:effective/utils/base_view.dart';
import 'package:effective/view_model/user_model.dart';
import 'package:effective/view_model/user_page_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class UserPage extends StatefulWidget {
  UserPage({Key key}) : super(key: key);

  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return BaseView<UserPageViewModel>(
      model: UserPageViewModel(api: API()),
      onModelReady: (model) async {},
      builder: (context, model, child) {
        return Scaffold(
          appBar: PreferredSize(
            child: AppBar(
              elevation: 0,
              foregroundColor: Colors.white,
              backgroundColor: Colors.white,
              title: Container(
                margin: EdgeInsets.fromLTRB(87, 25, 0, 16),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      child: Text.rich(TextSpan(children: [
                        TextSpan(
                            text: 'E',
                            style: TextStyle(fontSize: 28, color: Colors.blue)),
                        TextSpan(
                            text: '-ffective',
                            style:
                                TextStyle(fontSize: 25, color: Colors.black)),
                      ])),
                    ),
                    Expanded(
                      child: Container(),
                      flex: 1,
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(0, 0, 25, 0),
                      child: Row(
                        children: [
                          Container(
                            margin: EdgeInsets.only(right: 20),
                            child: Provider.of<UserModel>(context).value == ""
                                ? Text(
                                    '请登录后操作',
                                    style: TextStyle(
                                        fontSize: 20, color: Colors.black),
                                  )
                                : Text.rich(TextSpan(children: [
                                    TextSpan(
                                      text: 'Hello, ',
                                      style: TextStyle(
                                          fontSize: 20, color: Colors.black),
                                    ),
                                    TextSpan(
                                      text:
                                          Provider.of<UserModel>(context).value,
                                      style: TextStyle(
                                          fontSize: 20, color: Colors.blue),
                                    ),
                                  ])),
                          ),
                          Provider.of<UserModel>(context).value == ""
                              ? Container(
                                  height: 35,
                                  width: 105,
                                  child: OutlineButton(
                                    borderSide: BorderSide(
                                        width: 2, color: Colors.blue),
                                    textColor: Colors.blue,
                                    color: Colors.white,
                                    shape: RoundedRectangleBorder(
                                        side: BorderSide.none,
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(50))),
                                    onPressed: () async {
                                      model.login(context);
                                    },
                                    child: Text(
                                      'LOG IN',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                )
                              : Container(
                                  height: 35,
                                  width: 105,
                                  child: OutlineButton(
                                    borderSide: BorderSide(
                                        width: 2, color: Colors.blue),
                                    textColor: Colors.blue,
                                    color: Colors.white,
                                    shape: RoundedRectangleBorder(
                                        side: BorderSide.none,
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(50))),
                                    onPressed: () async {
                                      model.logout(context);
                                    },
                                    child: Text(
                                      'LOG OUT',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              automaticallyImplyLeading: false,
            ),
            preferredSize: Size(double.infinity, 70),
          ),
          body: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: Colors.grey[500],
                  height: 2,
                  width: double.infinity,
                ),
                Expanded(
                  child: Container(
                    child: mainPage(context, model),
                  ),
                  flex: 1,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 79,
                  child: Image.asset(
                    'assets/bottom.png',
                    fit: BoxFit.fill,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget mainPage(BuildContext context, UserPageViewModel model) {
    return Container(
      child: Column(
        children: [
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                MaterialButton(
                  height: 49,
                  minWidth: 400,
                  elevation: 0,
                  textColor: Colors.white,
                  color: Color(0xFF7484F4),
                  shape: RoundedRectangleBorder(
                      side: BorderSide.none,
                      borderRadius: BorderRadius.all(Radius.circular(50))),
                  onPressed: () async => model.uploadNewSpeech(context),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'UPLOAD YOUR NEW SPEECH',
                        style: TextStyle(fontSize: 16),
                      ),
                      Icon(
                        Icons.cloud_upload_sharp,
                        size: 16,
                      ),
                    ],
                  ),
                ),
                MaterialButton(
                  height: 49,
                  minWidth: 400,
                  elevation: 0,
                  textColor: Colors.white,
                  color: Color(0xFF7484F4),
                  shape: RoundedRectangleBorder(
                      side: BorderSide.none,
                      borderRadius: BorderRadius.all(Radius.circular(50))),
                  onPressed: () async => model.uploadNewSpeech(context),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'UPLOAD YOUR NEW SPEECH',
                        style: TextStyle(fontSize: 16),
                      ),
                      Icon(
                        Icons.cloud_upload_sharp,
                        size: 16,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              child: speechList(context, model),
            ),
            flex: 1,
          )
        ],
      ),
    );
  }

  Widget speechList(BuildContext context, UserPageViewModel model) {
    return Container(
      child: ListView.builder(itemBuilder: (context, pos) {
        return pos != 0?Container(
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Center(
                  child: Text(model.speechVideoEntityList[pos-1].title ?? "1"),
                ),
                flex: 3,
              ),
              Expanded(
                child: Center(
                  child: Text(model.speechVideoEntityList[pos-1].lastUpdateTime ?? "1"),
                ),
                flex: 3,
              ),
              Expanded(
                child: Center(
                  child: statusBar(
                      context, model.speechVideoEntityList[pos-1].status ?? 0),
                ),
                flex: 4,
              ),
              Expanded(
                child: Container(
                  child: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: (){},
                  ),
                ),
                flex: 1,
              ),
            ],
          ),
        ):Container(
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Center(
                  child: Text("Speech Title"),
                ),
                flex: 3,
              ),
              Expanded(
                child: Center(
                  child: Text("Latest Update"),
                ),
                flex: 3,
              ),
              Expanded(
                child: Center(
                  child: Text('Status'),
                ),
                flex: 4,
              ),
              Expanded(
                child: Container(),
                flex: 1,
              ),
            ],
          ),
        );
      },itemCount: model.speechVideoEntityList.length+1,),
    );
  }

  Widget statusBar(BuildContext context, int status) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
          ),
          Container(
            width: 90,
            height: 1,
            color: Colors.grey,
          ),
          Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
          ),
          Container(
            width: 90,
            height: 1,
            color: Colors.grey,
          ),
          Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
          ),
          Container(
            width: 90,
            height: 1,
            color: Colors.grey,
          ),
          Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
          ),
        ],
      ),
    );
  }
}
